<template>
  <div class="book-sale">
    <div class="book">
      <van-image :src="book.img" class="book-img"></van-image>
      <div class="cntent">
        <div>
          <span class="book-name">{{book.title}}</span>
          <span class="book-publisher">{{book.publisher}}</span>
        </div>
        <div class="book-isbn">isbn:{{book.isbn}}</div>
        <div>
          <span class="book-price">原价：{{book.price}}元</span>
          <span class="book-type">{{book.type}}</span>
        </div>
      </div>
      <div class="book-gist">{{book.gist}}</div>
      <van-cell>全部卖家</van-cell>
      <van-list>
        <van-card v-for="userBook in userBooks" :key="userBook.userId"
                  :price="userBook.bookPrice"
                  :title="userBook.userName"
                  :thumb="book.img"
                  :desc="userBook.userSchool"
                  @click="cardClick(userBook.userBookId,userBook.userId)">
        </van-card>
      </van-list>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton,Card } from 'vant';
import {ApiService} from "@/axios/apiService";

Vue.use(GoodsAction);
Vue.use(Card);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  name:"bookSale",
  data() {
    return {
      book:{},
      userBooks: [],
      user: {}
    }
  },
  mounted() {
    var bookId = this.$route.params.bookId
    console.log("bookId" + bookId);
    this.getBookById(bookId);
    this.getBookByUser(bookId);
  },
  methods: {
     //跳转到具体商品
     cardClick (bookId,userId) {
       console.log("bookId"+bookId,"userId" + userId);
       this.$router.push({
         name:"bookUserSaleView",
         params: {
           bookId:bookId,
           userId:userId,
         }
       })
    },
     //获取该书所有卖家商品
     getBookByUser(bookId) {
       const api = new ApiService("/userBook")
       api.getParams({
         bookId:bookId
       }).then(res=> {
         this.userBooks = res.data.data;
       })
       },
     //获取该图书详情
     getBookById (bookId) {
       const api = new ApiService("/book/id")
       api.getParams({
         bookId:bookId
       }).then(res=> {
         this.book = res.data.data;
       })
     }
     },

}
</script>
<style scoped>
.book-sale {
  display: grid;
}
.book {
  width: 100vw;
  height: 40vh;
}
.book-img {
  width: 100vw;
  height: 40vh;
}
.book-isbn {
  font-size: large;
  margin-top: 1vh;
  margin-left: 2vw;
}
.book-name {
  font-size: x-large;
  font-weight: bold;
  margin-left: 2vw;
}
.book-gist {
  font-size: medium;
  margin-top: 1vh;
  margin-bottom: 1vh;
  margin-left: 2vw;
}
.book-publisher {
  float: right;
  font-size: large;
  margin-right: 2px;
}
.book-price {
  font-size: xx-large;
  color: #db3d3c;
  margin-left: 2vw;
}
.user-school {
  float: right;
}
.user {
  width: 100vw;
  height: 5vh;
  margin-bottom: 1vh;
}
.book-type {
  margin-left: 5px;
}
</style>
